<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label-width="0">
          <u-edit ref="uedit" :serverUrl="serverUrl" />
          <!-- <el-input v-model="form.content" rows="5" type="textarea" placeholder="请输入活动内容"></el-input> -->
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="图片" prop="image">
          <el-upload
            class="avatar-uploader"
            :action="'/aliyun/upload_image'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="image">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!-- <el-button type="primary" size="small">选择图片</el-button> -->
        </el-form-item>

        <el-form-item label="名称" prop="title">
          <el-input placeholder="请输入名称" v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item class="inline-item" label="价格" prop="price">
          <el-input placeholder="请输入价格" v-model="form.price"></el-input>
        </el-form-item>

        <el-form-item class="inline-item" label="原价" prop="desc_price">
          <el-input placeholder="请输入原价" v-model="form.desc_price"></el-input>
        </el-form-item>

        <el-form-item class="inline-item" label="库存" prop="store">
          <el-input placeholder="请输入库存" v-model="form.store"></el-input>
        </el-form-item>

        <el-form-item class="inline-item" label="开始时间" prop="start_time">
          <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择开始时间"></el-date-picker>
        </el-form-item>

        <el-form-item class="inline-item" label="结束时间" prop="end_time">
          <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择结束时间"></el-date-picker>
        </el-form-item>

        <el-form-item class="inline-item" label="发货时间" prop="send_time">
          <el-date-picker v-model="form.send_time" type="datetime" placeholder="选择发货时间"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submite" :loading="loading">提交</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { save, read } from '../../api/groupbar'
import UEdit from '../../components/Ueditor/index'
export default {
  components: { UEdit },
  data() {
    return {
      serverUrl: '/aliyun/upload_editor',
      id: this.$route.query.id,
      loading: false,
      imageUrl: '',
      form: {
        image: '',
        title: '',
        // content: '',
        store: '',
        price: '',
        desc_price: '',
        start_time: '',
        end_time: '',
        send_time: '',
        is_top: 0
      },
      rules: {
        image: [{ required: true, message: '请选择图片', trigger: 'blur' }],
        title: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        // content: [{ required: true, message: '请输入活动内容', trigger: 'blur' }],
        store: [{ required: true, message: '请输入库存', trigger: 'blur' }],
        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        desc_price: [{ required: true, message: '请输入原价', trigger: 'blur' }],
        start_time: [{ required: true, message: '请输入开始时间', trigger: 'blur' }],
        end_time: [{ required: true, message: '请输入结束时间', trigger: 'blur' }],
        send_time: [{ required: true, message: '请输入发货时间', trigger: 'blur' }]
      }
    }
  },

  created() {
    if (this.id) {
      const load = this.$loading()
      read(this.id)
        .then(res => {
          console.log(res)
          const val = res.data
          this.imageUrl = val.image[0].url
          this.$refs.uedit.setContents(val.content)
          this.form = {
            id: val.id,
            image: val.image[0].id,
            title: val.title,
            // content: val.content,
            store: val.store,
            price: val.price,
            desc_price: val.desc_price,
            start_time: val.start_time * 1000,
            end_time: val.end_time * 1000,
            send_time: val.send_time * 1000
          }
          load.close()
        }).catch(e => {
          load.close()
        })
    }
  },

  methods: {
    submite() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          save({
            ...this.form,
            content: this.$refs.uedit.contents,
            start_time: new Date(this.form.start_time).getTime() / 1000,
            end_time: new Date(this.form.end_time).getTime() / 1000,
            send_time: new Date(this.form.send_time).getTime() / 1000,
            status: 1
          })
            .then(res => {
              console.log(res)
              if (res.status > 0) {
                this.$message.success(res.msg)
                this.$router.back()
              } else {
                this.$message.error(res.msg)
              }
            }).catch(e => {
              console.log(e)
            }).finally(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },

    handleAvatarSuccess(res, file) {
      // this.form.image = URL.createObjectURL(file.raw)
      if (res.status > 0) {
        this.form.image = res.data._id
        this.imageUrl = res.data._path
      } else {
        this.$message.error('上传错误')
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss">
.inline-item { display: inline-block; width: 49%; }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-date-editor.el-input {
  width: 100%;
}
</style>
